<template>
  <div class="productAdmin">
    <el-row id="first" :gutter="20" align="middle" type="flex" style="margin: 20px auto;">
      <el-col :span="4">输入搜索：</el-col>
      <el-col :span="6">
        <el-input v-model="searchContent" placeholder="品牌名称/关键字"></el-input>
      </el-col>
      <el-col :span="6" :offset="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="searchs()">
            <span>查询结果</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" align="middle" type="flex" style="margin: 20px auto;">
      <el-col :span="6">
        <div class="grid-content bg-purple">数据列表</div>
      </el-col>
      <el-col :span="6" :offset="12">
        <div class="grid-content bg-purple">
          <el-button @click="addBrand()">
            <span>添加</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 1120px"
      :border="true"
      :fit="true"
      :default-sort="{prop: 'sort', order: 'descending'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="品牌名称" width="184" align="center"></el-table-column>
      <el-table-column prop="firstLetter" label="品牌首字母" width="100" align="center"></el-table-column>
      <el-table-column prop="sort" label="排序" width="80" align="center"></el-table-column>
      <el-table-column prop="factoryStatus" label="品牌制造商" width="180" align="center">
        <template slot-scope="scope">
          <el-switch
            class="switch"
            v-model="scope.row.factoryStatus"
            :active-value="1"
            :inactive-value="0"
            @change="factoryStatus($event,scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="showStatus" label="是否显示" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            class="switch"
            v-model="scope.row.showStatus"
            :active-value="1"
            :inactive-value="0"
            @change="showStatus($event,scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="相关" width="180" align="center">
        <template slot-scope="scope">
          <span>
            商品：
            <span style="color:#409eff">{{scope.row.productCount}}</span>
          </span>&nbsp;
          <span>
            评价：
            <span style="color:#409eff">{{scope.row.productCommentCount}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateProduct(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5,10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalpage"
          :background="true"
          :page-size="pagesize"
        ></el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchContent: null,
      value1: true,
      value2: true,
      totalpage: null,
      pageNum: null,
      currentPage1: 1,
      pagesize: 10,
      currpage: 1,
      tableData: [
        {
         
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
    
      this.pagesize = val;
        var that = this;
      this.$axios
        .get("/brand/list?pageNum="+this.currpage+"&pageSize="+val, {
          params: {}
        })
        .then(function(ret) {
          var goodsList = ret.data.data;
          console.log(goodsList);
          that.tableData = goodsList.list;
          
         
        });
    },
    handleCurrentChange(val) {
     
      this.currpage = val;
         var that = this;
      this.$axios
        .get("/brand/list?pageNum="+val+"&pageSize="+this.pagesize, {
          params: {}
        })
        .then(function(ret) {
          var goodsList = ret.data.data;
          console.log(goodsList);
          that.tableData = goodsList.list;
        
        });
      
    },
    showBrand() {
      var that = this;
      this.$axios
        .get("/brand/list?pageNum="+this.currpage+"&pageSize="+this.pagesize, {
          params: {}
        })
        .then(function(ret) {
          var goodsList = ret.data.data;
      
          that.totalpage = goodsList.total
          that.tableData = goodsList.list;
        });
    },
    //跳转到添加页面
    addBrand() {
      this.$router.push("/addBrand");
    },
    //查询
    searchs() {
      var content = this.searchContent;
      var tabledata = this.tableData;
      var that = this;
      tabledata.forEach(element => {
        if (element.name.search(content) != -1) {
          this.$axios.get("/brand/" + element.id, {}).then(function(ret) {
            var arr = [];
            var goodsList = ret.data.data;
            if (ret) {
              var arr = [];
              var goodsList = ret.data.data;
              arr.push(goodsList);
              that.tableData = arr;
            }
          });
        } else {
          that.tableData = [];
        }
      });
    },
    updateProduct(element){
        
          this.$axios
            .get("/brand/"+element.id, {})
            .then(ret => {
               
              
               this.$router.push({ name: "updateBrand", params: {  element: ret.data.data } });
            })
    },
    handleDelete(element){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
         
           this.$axios
          .get("/brand/delete/"+element.id)
          .then(ret=>{
            this.showBrand()
          })
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
     factoryStatus($event,element){
     
          this.$axios
            .post("/brand/update/factoryStatus?factoryStatus="+$event+"&ids="+element.id, {})
            .then(ret => {
               
               
            })
    },
    showStatus($event,element){
         this.$axios
            .post("/brand/update/showStatus?ids="+element.id+"&showStatus="+$event, {})
            .then(ret => {
               
               
            })
    }
  },
  mounted() {
    this.showBrand();
  }
};
</script>

<style scoped >
.el-table {
  margin: 0px auto;
}
.productAdmin{
   height: 650px;
  overflow: scroll;
}
.block {
  
  float: right;
}
.el-pagination {
width: 500px;
}
#first {
  width: 1120px;
  height: 100px;
  border: 1px solid #ebeef5;
}
.el-row {
  width: 1120px;
  height: 50px;

  border: 1px solid #ebeef5;
}
.grid-content .el-button {
  float: right;
}
.grid-content .el-button span {
  text-align: center;
}
</style>